<template>
  <a-form :form="form">
      <a-row>
          <a-col :span="24">
              <a-form-item :labelCol="labelCol1" :wrapper-col="wrapperCol1" :label="i18n('form.type','类型')">
                  <a-radio-group @change="sqlTypeChange" v-model="mdl.vueType"
                                 v-decorator="['vueType', {rules: [{required: true, message: i18n('form.type','类型','select')}]}]">
                      <a-radio value="vue">{{i18n('form.vueComponent','vue组件')}}</a-radio>
                      <a-radio value="url">{{i18n('form.externalUrl','外部url')}}</a-radio>
                  </a-radio-group>
              </a-form-item>
          </a-col>
      </a-row>
    <a-row>
      <a-col :span="24">
        <a-form-item :labelCol="labelCol1" :wrapper-col="wrapperCol1" :label="mdl.vueType=='vue'? i18n('form.componentPath','组件路径'): i18n('form.componentUrl','url地址')">
          <a-input v-model="component" style="width: 80%" :placeholder="mdl.vueType=='vue'? i18n('form.componentPath','组件路径','input'): i18n('form.componentUrl','url地址','input')"/>
          <a-tooltip v-if="mdl.vueType=='vue'">
            <template slot="title" style="width:400px;">
                {{i18n('msa.componentPathTips','组件路径说明')}}
            </template>
            <a-icon type="question-circle-o"/>
          </a-tooltip>
        </a-form-item>
      </a-col>
    </a-row>
  </a-form>
</template>

<script>
  import {BaseForm, RxDialog} from "@lowcode/jpaas-common-lib";


  export default {
    name: "insColumnDefVueBel",
    mixins: [BaseForm],
    components: {
      RxDialog
    },
    props: {
      dataObj: {
        type: Object,
        default: null
      }
    },
    mounted(){
      this.component = this.dataObj.component;
      this.vueType = this.dataObj.vueType;
      if(!this.vueType){
          this.vueType="vue";
      }
        this.form.setFieldsValue({vueType: this.vueType});
    },
    data() {
      return {
        component:"",
        vueType:""
      }
    },
    methods:{
        i18n(name,text,key){
            return this.$ti18(name,text,"insColumnDef",key);
        },
        sqlTypeChange(e) {
            this.vueType = e.target.value;
        },
      valid() {
        if(!this.component){
          this.$message.error(this.i18n('msa.componentPathError','组件路径'));
          return false;
        }
        return true;
      }
    },
    watch: {
      component: function (val) {
        this.dataObj.component = val;
        this.$emit("change", this.dataObj);
      },
        vueType: function (val) {
        this.dataObj.vueType = val;
        this.$emit("change", this.dataObj);
      }
    }
  }
</script>

<style scoped>

</style>